<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			li,.active{
			 display: none;
			 width: 600px;
			 height: 100px;
			 border: 1px solid #0062CC;
			 font-size: 50px;
			 line-height: 100px;
			 text-align: center;
			}
			.active{
			 display: block;
			}
			a,.show{
			 color: black;
			 background-color: palegreen;
			 display: block;
			 width: 120px;
			 height: 30px;
			 float: left;
			 line-height: 30px;
			 margin-left: 80px;
			 text-align: center;
			}
			.show{
			 color: white; 
			}
			nav:after{
				display: block;
				clear: both;
				content: '';
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<nav>
				  <a class="show" href="javascript:;">按钮1</a>
				  <a href="javascript:;">按钮2</a>
				  <a href="javascript:;">按钮3</a>
			 </nav> 
			 <ul>
				  <li class="active">选项卡1</li>
				  <li>选项卡2</li>
				  <li>选项卡3</li>
			 </ul>
			 
		</div>
		
		
		<script type="text/javascript">
				function tab(obj){
					 this.oList = obj.getElementsByTagName('ul')[0];
					 this.aIn = this.oList.getElementsByTagName('li');
	
					 this.oConList = obj.getElementsByTagName('nav')[0];
					 this.aCon = this.oConList.getElementsByTagName('a');
	
					 this.count = this.aIn.length;
	
					 this.cur = 0;
					 var This = this;
					 
					 for(var i = 0; i < this.count; i++){
	
					  this.aCon[i].index = i;
	
					  this.aCon[i].onclick = function(){
					   This.cur = this.index;
					   This.switch();
					  }
					 }
					}
					tab.prototype.switch = function(){
	
					 for(var i = 0; i < this.count; i++){
					  this.aIn[i].className = '';
					  this.aCon[i].className = '';
					 }
	
					 this.aIn[this.cur].className = 'active';
					 this.aCon[this.cur].className = 'show'; 
				}

				var oBox = document.getElementById('box');

				var tab1 = new tab(oBox);
		</script>
	</body>
</html>
